<template>
  <div>
    <cus-modal
      ref="modal"
      title="修改食谱封面"
      :width="385"
      :closable="true"
      @on-visible-change="onVisibleChange"
    >
      <div class="tabsBox">
        <Upload
          ref="upload"
          :before-upload="handleBeforeUpload"
          :headers="uploadHeader"
          :action="baseURL1 + '/FoodBookService/updateMealPlanImage'"
          :data="params"
          :show-upload-list="false"
          :on-success="onSuccess"
          accept="image/jpeg,image/jpg,image/png"
        >
          <div class="imgBox">
            <img v-if="uploadFiles" :src="uploadFiles" />
            <img :src="form.mealImg" alt="" v-else-if="form.mealImg" />
            <div
              v-else
              style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:white;background:gray"
            >
              暂无食谱封面
            </div>
          </div>
          <div class="wairning">
            点击图片进行食谱封面替换,图片上传格式为：jpeg、jpg、png
          </div>
        </Upload>
      </div>
      <Spin size="large" fix v-if="loading"> </Spin>
      <div slot="footer">
        <slot name="footer">
          <div class="modal-footer">
            <cus-button size="small" class="mr_2" @onClick="onCancel"
              >取消</cus-button
            >
            <cus-button type="primary" size="small" @onClick="onOk"
              >修改</cus-button
            >
          </div>
        </slot>
      </div>
    </cus-modal>
  </div>
</template>

<script>
import { updateProduct } from "@/api/business/dishesModule";
import { baseURLou } from "@/api/conf/index";

export default {
  components: {},
  name: "changeImg",
  data() {
    return {
      loading: false,
      form: {},
      params: {},
      baseURL1: baseURLou,
      file: {},
      uploadFiles: "",
      uploadHeader:{}
    };
  },
  mounted() {},
  methods: {
    onVisibleChange(v) {
      if (!v) {
        this.form = {};
        this.params = {};
        this.file = {};
        this.uploadFiles = "";
      }
    },
    show(row) {
      console.log(row);
      this.loading = false;
      this.$refs["modal"].show = true;
      if (row) {
        this.form = this.$cu.deepClone(row);
        this.uploadHeader.token=this.vuex_user.token
        this.params = {
          mealPlanId: row.mealPlanId,
          token: this.vuex_user.token
        };
      }
    },
    //模态框确认
    onOk() {
      console.log(this.file.type);
      if(this.file.type == undefined) {
        this.$Message.warning('图片未修改')
        return
      }
      //通过refs上传文件
      this.$refs.upload.post(this.file);
    },
    //模态框取消
    onCancel() {
      this.$refs["modal"].show = false;
    },
    // 上传成功
    onSuccess(response, file, fileList) {
      if (response.retCode == 2000) {
        this.$Message.success("食谱封面替换成功.");
        this.onCancel();
        this.$parent.onInit();
      } else {
        this.$Message.warning(response.retMsg);
      }
    },
    handleBeforeUpload(file) {
      this.file = file;
      const _this = this;
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        _this.uploadFiles = e.currentTarget.result;
      };
      return false;
    }
  }
};
</script>
<style scoped>
/deep/ .ivu-modal-body {
  padding: 24px !important;
}
</style>
<style scoped lang="less">
.imgBox {
  width: 335px;
  height: 235px;
  border: 1px dashed #d9d9d9;
  border-radius: 2px;
  padding: 8px;
  cursor: pointer;
  img {
    width: 319px;
    height: 219px;
  }
}
.wairning {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 10px;
}
</style>
